<template>
    <div>
        <div class="top">
            <Input placeholder="搜索标题" style="width:300px" v-model="formData.title"></Input>
            <Input placeholder="搜索作者" style="width:300px" v-model="formData.author"></Input>
            <Select v-model="formData.type" style="width: 300px">
                <Option value="0">新闻</Option>
                <Option value="1">百生智库</Option>
                <Option value="2">公司简介</Option>
                <Option value="3">主营业务</Option>
                <Option value="4">联系我们</Option>
            </Select>
            <Button type="primary" icon="ios-search" @click="searchQuery">查询</Button>
            <Button type="primary" @click="addModal">新增</Button>
        </div>
        <Table :columns="columns" :data="dataList" border></Table>
        <div style="position: relative">
            <Page style="text-align: right;padding-top: 10px;" :page-size="formData.rows" @on-page-size-change="pageSizeFn" @on-change="pageFn" :total="total" show-sizer show-total></Page>
        </div>
        <article-add ref="myEdit" :editStatus="editStatus" :articleId="articleId" v-on:closeModal="closeModal"></article-add>
    </div>
</template>
<script>
    import articleAdd from '@/templates/article/article_add.vue'
    import qs from 'qs'
    import API from '../../config/api'
    export default {
        components:{
            articleAdd
        },
        data() {
            return {
                columns: [
                    {
                        title: "文章ID",
                        key: "id"
                    },
                    {
                        title: "标题",
                        key: "title"

                    },
                    {
                        title: "作者",
                        key: "author"

                    },
                    {
                        title: "分类",
                        key: "type",
                        render: (h, params) => {
                            let type = params.row.type;
                            let typeVal = '';
                            switch (type) {
                                case '0':
                                    typeVal = '新闻';
                                    break;
                                case '1':
                                    typeVal = '百生智库';
                                    break;
                                case '2':
                                    typeVal = '公司简介';
                                    break;
                                case '3':
                                    typeVal = '主营业务';
                                    break;
                                case  '4':
                                    typeVal = '联系我们';
                                    break;
                            }
                            return h('span', typeVal);
                        }
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                    },
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.addModal(params.row.id)
                                            }
                                        }
                                    },
                                    "修改"
                                ),h(
                                    "Button",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.deletArticle(params.row.id)
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
                dataList: [],
                total:0,
                editStatus: false,
                articleId: '', //文章id
                formData:{
                    title: '',
                    author: '',
                    type: '',
                    page: 1,
                    rows: 20
                }
            };
        },
        created(){
            this.query();
        },
        methods: {
            chooseTime() {

            },
            deletArticle(id){
                let data = {
                    id : id
                }
                this.axios.post(API.DELETE_ARTICLE, qs.stringify(data)).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.query()
                        this.$Message.info('删除成功');
                    }else{
                        this.$Message.error(data.msg);
                    }
                })
            },
            query(){
                let formData = new FormData();
                formData.append('title', this.formData.title);
                formData.append('author', this.formData.author);
                formData.append('type', this.formData.type);
                formData.append('page', this.formData.page);
                formData.append('rows', this.formData.rows);
                this.axios.post(API.GET_ARTICLE_LIST, formData).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.total = data.data.totalCount;
                        this.dataList = data.data.dataList;
                    }
                })
            },
            pageSizeFn(size){
                this.formData.rows = size;
                this.query();
            },
            pageFn(num){
                this.formData.page = num;
                this.query();
            },
            searchQuery() {
                this.formData.page = 1;
                this.query();
            },
            addModal(id){
                this.editStatus = true;
                if (typeof id === 'string' || typeof id === 'number'){
                    this.articleId = id;
                }else {
                    this.articleId = ''
                }
            },
            closeModal(){
                this.editStatus = false;
                this.formData.page = 1;
                this.query();
            }
        }
    };
</script>
<style scoped>
    .top {
        margin: 30px 0;
    }
</style>
